<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的模板</title>
    <style>
        .box {
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
            border-radius: 25px;
        }
    </style>
</head>

<body>



    <div id="app">
        <mycpn2>

        </mycpn2>
        <mycpn1>

        </mycpn1>
    </div>


</body>



<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    //创建组件构造器对象
    const cpn1 = Vue.extend({
        template: `
        <div class="box">
        <span>学习
              <span>你好的</span>
              </span>
      </div>
            `
    })
    const cpn2 = Vue.extend({
            template: `
          <div class="box">
        
        </div>
      `
        })
        //注册组件
    Vue.component('mycpn1', cpn1);
    Vue.component('mycpn2', cpn2);

    const app = new Vue({
        el: '#app',
        data: {},
    })
</script>